<template>
  <div class='muesuit-container flex'>
    <div class="muesuit-content">
      <img :src="tracksItem.cover_path" alt="">
      <div class="mengban"></div>
      <svg t="1704872889920" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4600" width="16" height="16"><path d="M128 138.666667c0-47.232 33.322667-66.666667 74.176-43.562667l663.146667 374.954667c40.96 23.168 40.853333 60.8 0 83.882666L202.176 928.896C161.216 952.064 128 932.565333 128 885.333333v-746.666666z" fill="#FFFFFF" p-id="4601"></path></svg>
    </div>
    <div class="muesuit-content-right">
      <div class="muesuit-content-right-span">
        <span>{{ tracksItem.title }}</span>
      </div>

      <p class="muesuit-content-info flex">
        <div class="muesuit-content-info-person flex">
          <svg t="1704874018883" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4800" id="mx_n_1704874018885" width="16" height="16"><path d="M438.272 603.648c-132.608 0-240.64-108.032-240.64-240.64s108.032-240.64 240.64-240.64 240.64 108.032 240.64 240.64-108.032 240.64-240.64 240.64z m0-419.84c-98.816 0-179.2 80.384-179.2 179.2s80.384 179.2 179.2 179.2 179.2-80.384 179.2-179.2-80.384-179.2-179.2-179.2z" p-id="4801" fill="#BBBBBB"></path><path d="M832.512 955.904h-30.72c-257.536-1.536-361.984 0-363.008 0H44.032v-30.72c0-209.408 165.888-361.984 394.24-361.984s394.24 152.064 394.24 361.984v30.72z m-725.504-61.44h331.264c0.512 0 96.256-1.536 331.264 0-15.36-157.696-150.016-269.312-331.264-269.312-181.248-0.512-315.904 111.104-331.264 269.312zM715.776 538.112l-35.84-49.664C732.16 450.56 762.88 390.144 762.88 326.144c0-97.792-72.704-182.272-168.96-196.608l9.216-60.928c126.464 18.944 221.184 129.536 221.184 257.536 0 83.968-40.448 162.816-108.544 211.968z" p-id="4802" fill="#BBBBBB"></path><path d="M964.096 882.176l-58.368-19.456c8.192-24.576 12.288-50.176 12.288-76.288 0-131.072-107.008-238.08-238.08-238.08V486.4c165.376 0 299.52 134.144 299.52 299.52 0.512 32.768-5.12 65.024-15.36 96.256z" p-id="4803" fill="#BBBBBB"></path><path d="M964.096 881.664h-67.072l9.216-20.48h57.856zM603.136 129.536H593.92v-61.44l9.216 0.512z" p-id="4804" fill="#BBBBBB"></path></svg>
          
          <span>{{ tracksItem.album_title }}</span>
        </div>
        <div class="muesuit-content-info-time flex">
          <svg t="1704874179383" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6818" width="16" height="16"><path d="M512 64c-256 0-460.8 208-460.8 460.8s208 460.8 460.8 460.8 460.8-208 460.8-460.8S768 64 512 64zM512 940.8c-227.2 0-412.8-185.6-412.8-412.8s185.6-412.8 412.8-412.8 412.8 185.6 412.8 412.8S742.4 940.8 512 940.8z" p-id="6819" fill="#9B9B9B"></path><path d="M809.6 544l-278.4 0 0-281.6c0-12.8-9.6-22.4-22.4-22.4-12.8 0-22.4 9.6-22.4 22.4l0 307.2c0 12.8 9.6 22.4 22.4 22.4 0 0 3.2 0 3.2 0l297.6 0c12.8 0 22.4-9.6 22.4-22.4C832 553.6 822.4 544 809.6 544z" p-id="6820" fill="#9B9B9B"></path></svg>
          <span>{{ Math.round(tracksItem.album_id/6000000)+":"+Math.floor(tracksItem.album_id/60000000) }}</span>
        </div>
        <div class="muesuit-content-info-radio flex">
          <svg t="1704873876289" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4836" width="16" height="16"><path d="M224 938.713333a53.58 53.58 0 0 1-53.333333-53.433333V138.72a53.333333 53.333333 0 0 1 80.886666-45.666667l618.666667 373.28a53.333333 53.333333 0 0 1 0 91.333334l-618.666667 373.28a53.16 53.16 0 0 1-27.553333 7.766666z m0.046667-810.666666a10.98 10.98 0 0 0-5.333334 1.42 10.466667 10.466667 0 0 0-5.38 9.253333v746.56a10.666667 10.666667 0 0 0 16.18 9.133333l618.666667-373.28a10.666667 10.666667 0 0 0 0-18.266666l-618.666667-373.28a10.386667 10.386667 0 0 0-5.446666-1.586667z" fill="#B3B3B3" p-id="4837"></path></svg>
          <span>{{ tracksItem.count_play }}</span>
        </div>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps(['tracksItem'])

</script>

<style scoped>
  .muesuit-container {
    /* margin-top: 10px; */
    height: 70px;
    padding: 15px 0px;
    border-bottom: 1px solid #E8E8E8;
  }
  .muesuit-container:last-child{
    border-bottom:none;
  }
  .muesuit-content {
    width: 50px;
    height: 50px;
    position: relative;
  }
  .muesuit-content > img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .mengban{
    border-radius: 50%;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    position: absolute;
    top: 0px;
  }
  .muesuit-content > svg {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 99;
    width: 20px;
    height: 20px;
  }
  .muesuit-content-right {
    flex:1;
    margin-left: 10px;
  }
  .muesuit-content-right-span {
    width: 290px;

  }
  .muesuit-content-right-span > span{
    font-size: 16px;
    color: #40404c;
    /* line-height: 18px; */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }
  .muesuit-content-info {
    margin-top: 10px;
    width: 200px;
    justify-content: space-between;
  }
  .muesuit-content-info-person > svg {
    width: 13px;
  height: 13px;
  }
  .muesuit-content-info-person > span {
    width: 80px;
    margin-left: 3px;
    font-size: 12px;
    color: #999;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;

  }
  .muesuit-content-info-person {
    margin: auto 0px;
    
  }
  .muesuit-content-info-time > svg {
    width: 13px;
  height: 13px;
  margin: auto 0px;
  } 
  .muesuit-content-info-time > span {
    margin-left: 3px;
    font-size: 12px;
    color: #999;
    line-height: 28px;

  } 
  .muesuit-content-info-radio > svg {
    width: 13px;
  height: 13px;
  margin: auto 0px;
  } 
  .muesuit-content-info-radio > span {
    margin-left: 3px;
    font-size: 12px;
    color: #999;
    line-height: 28px;
  }
</style>